import React from "react";
import "./index.less";
import AdScreenTopBar from "./advertising-screen-top-bar";
import AdScreenBottomBar from "./advertising-screen-bottom-bar";
import { Map, List, fromJS } from "immutable";
declare let window: any;
const { msg, xKit, BusinessDataCenter, commonComp } = window.xDllContext;
const ImgComp = commonComp.xImage;
export interface IAdScreen {
  top: IAdScreenTop;
  bottom: IAdScreenBottom;
  dataWidgetPath: () => {};
  ENV_EDITING: boolean;
}
export interface IAdScreenTop {
  style: {
    splitScreen: number;
    playType: number;
  };
  items: any[];
}
export interface IAdScreenBottom {
  items: any[];
  style: {
    dot: string;
    animateType: string;
    animateTime: number;
    size: string;
  };
}
export default class AdScreenNewBar extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static displayName = "AdScreenNewBar";
  static defaultProps = {};
  render() {
    const { top, bottom, ENV_EDITING, dataWidgetPath } = this.props;

    return (
      <div
        className={ENV_EDITING ? "qmBar advertising-new-edit" : "qmBar advertising-new-display"}
        data-widget-path={dataWidgetPath}
      >
        <div
          className={
            ENV_EDITING ? "qmGroup advertising-new-edit" : "qmGroup advertising-new-display"
          }
          data-widget-path={dataWidgetPath}
        >
          <AdScreenTopBar
            ENV_EDITING={ENV_EDITING}
            items={top.get("items")}
            style={top.get("style")}
          />
          <AdScreenBottomBar
            top={top}
            ENV_EDITING={ENV_EDITING}
            items={bottom.get("items")}
            style={bottom.get("style")}
          />
        </div>
      </div>
    );
  }
}
